/***| core |*******************************************************************/

* { border:0; margin:0; padding:0; font-size:100%; }
html { overflow:auto; }
body { background:#260930 url(bg.png); font:13px/1.231 sans-serif; *font-size:small; } 
a, a:link, a:hover, a:active, a:visited { color:#fff; text-decoration:none; }

/* html5 elements */
nav { display:block; }

/* no text selection color */
::-moz-selection{ background:transparent; text-shadow:none; }
::selection { background:transparent; text-shadow:none; }
a:link { -webkit-tap-highlight-color:transparent; }


/***| extras |*****************************************************************/

/* hover */
nav:hover a, nav:hover a:link, nav:hover a:active, nav:hover a:visited, nav:hover form { filter:alpha(opacity=65); opacity:.65; }
nav:hover a:hover, nav:hover form:hover, nav:hover input:focus { filter:alpha(opacity=100); opacity:1; }

/* form */
form { height:30px; width:635px; position:absolute; left:340px; top:225px; text-align:center; padding:0; }
input { background:#fff; border:2px #fff solid; color:#333; font-size:14px; height:24px; line-height:24px; margin:5px 0px 5px 5px; padding:1px; width:568px; }
input:focus { border:2px #00aef0 solid; }
input.placeholder                { color:#ccc; font-style:oblique; }
input:-moz-placeholder           { color:#ccc; font-style:oblique; }
input::-webkit-input-placeholder { color:#ccc; font-style:oblique; }
button { background-color:transparent; background-image:url(tiles.png); background-position:-340px -225px; background-repeat:no-repeat; color:#333; font-size:14px; height:30px; margin-bottom:5px; margin-right:5px; text-transform:uppercase; vertical-align:bottom; width:50px; }
button:hover { background-position:-390px -225px; cursor:pointer; }


/***| tiles |******************************************************************/

/* size/position */
nav     { height:465px; margin:50px auto; position:relative; width:975px; }
nav a   { display:block; font-weight:bold; height:100%; margin:5px; position:absolute; text-align:center; width:100%; }
nav a iframe, nav a img { vertical-align:middle; }
#tile1  { font-size:72px; height:215px; left:525px; line-height:215px; top:0;     width:440px; }
#tile2  { font-size:68px; height:205px; left:340px; line-height:205px; top:265px; width:420px; }
#tile3  { font-size:52px; height:160px; left:0;     line-height:160px; top:225px; width:330px; }
#tile4  { font-size:40px; height:140px; left:225px; line-height:140px; top:75px;  width:290px; }
#tile5  { font-size:32px; height:103px; left:0;     line-height:103px; top:0;     width:215px; }
#tile6  { font-size:32px; height:102px; left:0;     line-height:102px; top:113px; width:215px; }
#tile7  { font-size:26px; height:98px;  left:770px; line-height:98px;  top:265px; width:195px; }
#tile8  { font-size:26px; height:97px;  left:770px; line-height:97px;  top:373px; width:195px; }
#tile9  { font-size:22px; height:75px;  left:0;     line-height:75px;  top:395px; width:160px; }
#tile10 { font-size:22px; height:75px;  left:170px; line-height:75px;  top:395px; width:160px; }
#tile11 { font-size:18px; height:65px;  left:225px; line-height:65px;  top:0;     width:140px; }
#tile12 { font-size:18px; height:65px;  left:375px; line-height:65px;  top:0;     width:140px; }

/* hover */
nav a:hover    { border:1px #fff solid; box-shadow:0 0 15px #fff; margin-left:4px; margin-top:4px; }
a#tile1:hover  { border-color:#672c9b; box-shadow:0 0 15px #672c9b; }
a#tile2:hover  { border-color:#03417a; box-shadow:0 0 15px #03417a; }
a#tile3:hover  { border-color:#621354; box-shadow:0 0 15px #621354; }
a#tile4:hover  { border-color:#7d9f2a; box-shadow:0 0 15px #7d9f2a; }
a#tile5:hover  { border-color:#409da5; box-shadow:0 0 15px #409da5; }
a#tile6:hover  { border-color:#4849a6; box-shadow:0 0 15px #4849a6; }
a#tile7:hover  { border-color:#409da5; box-shadow:0 0 15px #409da5; }
a#tile8:hover  { border-color:#da8515; box-shadow:0 0 15px #da8515; }
a#tile9:hover  { border-color:#409da5; box-shadow:0 0 15px #409da5; }
a#tile10:hover { border-color:#7d9f2a; box-shadow:0 0 15px #7d9f2a; }
a#tile11:hover { border-color:#cd432d; box-shadow:0 0 15px #cd432d; }
a#tile12:hover { border-color:#da8515; box-shadow:0 0 15px #da8515; }

/* default color */
nav a   { background-image:url(tiles.png); }
#tile1  { background-color:#672c9b; background-position:-525px -0;     }
#tile2  { background-color:#03417a; background-position:-340px -265px; }
#tile3  { background-color:#621354; background-position:-0     -225px; }
#tile4  { background-color:#7d9f2a; background-position:-225px -75px;  }
#tile5  { background-color:#409da5; background-position:-0     -0;     }
#tile6  { background-color:#4849a6; background-position:-0     -113px; }
#tile7  { background-color:#409da5; background-position:-770px -265px; }
#tile8  { background-color:#da8515; background-position:-770px -373px; }
#tile9  { background-color:#409da5; background-position:-0     -395px; }
#tile10 { background-color:#7d9f2a; background-position:-170px -395px; }
#tile11 { background-color:#cd432d; background-position:-225px -0;     }
#tile12 { background-color:#da8515; background-position:-375px -0;     }

/* image constraints */
#tile1  img { padding:26.875px 55px;     max-height:161.25px;  max-width:330px; }
#tile2  img { padding:25.625px 52.5px;   max-height:153.75px;  max-width:315px; }
#tile3  img { padding:20px     41.25px;  max-height:120px;     max-width:247.5px; }
#tile4  img { padding:17.5px   36.25px;  max-height:105px;     max-width:217.5px; }
#tile5  img { padding:12.875px 26.875px; max-height: 77.25px;  max-width:161.25px; }
#tile6  img { padding:12.75px  26.875px; max-height: 76.5px;   max-width:161.25px; }
#tile7  img { padding:12.25px  24.375px; max-height: 73.5px;   max-width:146.25px; }
#tile8  img { padding:12.125px 24.375px; max-height: 72.75px;  max-width:146.25px; }
#tile9  img { padding: 9.375px 20px;     max-height: 56.25px;  max-width:120px; }
#tile10 img { padding: 9.375px 20px;     max-height: 56.25px;  max-width:120px; }
#tile11 img { padding: 8.125px 17.5px;   max-height: 48.75px;  max-width:105px; }
#tile12 img { padding: 8.125px 17.5px;   max-height: 48.75px;  max-width:105px; }
